<template>
  <div class="modal" :style="show?'':'display:none'">
    <div class="warp"></div>
    <div class="modal-box" :class="show?'ani-enter':''">
      <div style="display: flex;align-items: center">
        <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" width="20" height="20">
          <path
            d="M512 0C229.189818 0 0 229.189818 0 512s229.189818 512 512 512 512-229.189818 512-512S794.810182 0 512 0z m-6.516364 812.590545a43.287273 43.287273 0 1 1 0.046546-86.62109 43.287273 43.287273 0 0 1 0 86.62109zM691.293091 390.981818c-2.513455 46.312727-16.709818 82.850909-87.691636 153.832727-35.979636 35.979636-58.693818 62.976-60.974546 86.667637a36.026182 36.026182 0 1 1-71.726545-7.074909c4.887273-49.896727 41.518545-90.205091 81.780363-130.513455 64.512-64.512 65.629091-84.992 66.699637-106.682182a92.625455 92.625455 0 0 0-26.391273-69.12 112.360727 112.360727 0 0 0-81.175273-34.583272h-0.232727A107.659636 107.659636 0 0 0 404.293818 390.981818a35.979636 35.979636 0 1 1-72.005818 0c0-47.941818 18.618182-92.951273 52.410182-126.836363a178.269091 178.269091 0 0 1 126.696727-52.689455 184.785455 184.785455 0 0 1 133.818182 57.018182 163.374545 163.374545 0 0 1 46.08 122.461091z"
            fill="#FF9800"></path>
        </svg>
        <div style="width: 15px"></div>
        <span>{{title}}</span>
      </div>

      <div class="content">
        <span>{{content}}</span>
      </div>

      <div class="action">
        <span style="color: #666666;cursor: pointer" @click="show = false">取消</span>
        <div style="width: 15px"></div>
        <span @click="excute" class="btn" style="color: #fff;background-color: #2d8cf0;border-color: #2d8cf0;">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "modal",
    data() {
      return {
        show: false
      }
    },
    props: {
      then: {
        type: Function
      },
      args: {
        type: Array
      },
      title: {
        type: String
      },
      content: {
        type: String
      }
    },
    methods: {
      excute() {
        this.then();
        this.show = false;
      }
    }
  }
</script>

<style scoped>

  .ani-enter {
    transition: all linear .2s;
    animation: x linear .2s;
  }
  @keyframes x {
    0%{
      transform: scale(0.7);
      opacity: 0;
    }
    100%{
      opacity: 1;
      transform: scale(1);
    }
  }

  .modal {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    z-index: 99999;
  }

  .warp {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9998;
  }

  .modal-box {
    width: 300px;
    height: 120px;
    padding: 15px;
    background: white;
    position: relative;
    z-index: 9999;
    border-radius: 3px;
    box-sizing: border-box;
  }

  .content {
    color: #515a6e;
    margin-left: 35px;
    margin-top: 15px;
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 15px;
  }

  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 3px 15px;
    font-size: 14px;
    border-radius: 4px;
    transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear;
    color: #515a6e;
  }
</style>
